import React, { useEffect, useState } from 'react';

// 获取网络状态
// js中有一个Bom 对象
// window history location document navigator
// navigator 获取浏览器信息  换可以获取当前浏览器的网络状态
// navigator.onLine 如果当前浏览器有网络,那么 属性值为 true 否则 false
// 思路 需要实时监听当前浏览器的网络状态 给window使用事件监听 
// online  监听在线网络状态  当浏览器有网的时候触发
// offline  监听离线是的状态 当浏览器离线的时候触发
//

// 引入自定义的hook
import useOnline from './online';
const Myhook = () => {

    // console.log(navigator.onLine)
    // const [line, setLine] = useState(navigator.onLine);

    // 注意: addEventListener绑定事件和清除事件必须是同一个事件,这样才能清除,处理函数也是同一个

    // const onlineFn = () => {
    //     console.log('在线')
    //     // 修改当前网络状态
    //     setLine(true)
    // }

    // const offlineFn = () => {
    //     console.log('离线')
    //     setLine(false)
    // }

    // // 需要使用生命周期函数 
    // // 初始化执行, 数据更新时,先执行return 箭头函数,再执行初始化
    // useEffect(() => {
    //     // 初始化
    //     window.addEventListener('online', onlineFn)
    //     window.addEventListener('offline', offlineFn)
    //     return () => {
    //         // 数据更新触发 
    //         window.removeEventListener('online', onlineFn)

    //         window.removeEventListener('offline', offlineFn)

    //     }
    // })

    return (
        <div>
            <p>获取浏览器的网络状态</p>
            <p>当前是否在线 :  {useOnline() ? '在线' : '离线'}</p>
        </div>
    );
}

export default Myhook;
